<template>
    <div class="home">
        <ul class="modle">
            <li @click="goToSub('pc-vue')">个人笔记</li>
            <li  @click="goToSub('yi-ri-zhi-ji-app')">一日之计(app)</li>
            <li  @click="goToExternal('onLineResume')">在线简历</li>
        </ul>
        <div class="repository">
            <i style="color:#3bf6ae">New</i> Gitee仓库地址 ：
            <a style="color:#213547" href="https://gitee.com/mm__l" target="_blank">https://gitee.com/mm__l</a>
            <br/>
            GitHub仓库地址：
            <a style="color:#213547" href="https://github.com/abecedarian1/knowledge-tree" target="_blank">https://github.com/abecedarian1/knowledge-tree</a>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'

const router = useRouter()
const goToSub=(param)=>{
    router.push(`/${param}/home`)
}

const goToExternal=(params)=>{
    switch(params){
        case 'onLineResume':
            window.open('http://39.105.220.189:8083', '_blank');
            break;
    }
}

</script>

<style scoped lang="less">

.home{
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: pink ;
    text-align: center;
    ul {
      margin: 0;
      li{
        list-style: none;
      }
    }
    .repository{
        padding:10px;
        background-color: #ff320040;

    }
}

.modle{
    padding: 30px;
    display: flex;
    flex-direction: row;
    gap:20px;

    li{
        display: flex;
        justify-content: center;
        align-items: center;
        background:gray;
        color:white;
        height: 90px;
        width: 90px;
    }
}


</style>